<template>

  <div class="container-wrapper">
    <div class="row-padding justify-center container-xxl container-row">
      <div class="wrapper">
        <div class="column">
          <form @submit.prevent.stop="onSubmit" class="q-gutter-md">
            <label for="first_name">First Name</label>
            <q-input
                ref="first_nameRef"
                :rules="first_nameRules"
                id="first_name"
                outlined
                v-model="first_name"
                style="width: 100%"
                color="grey"
                placeholder="First Name"/>

            <label for="last_name">Last Name</label>
            <q-input
                ref="last_nameRef"
                :rules="last_nameRules"
                id="last_name"
                outlined
                v-model="last_name"
                style="width: 100%"
                color="grey"
                placeholder="Last Name"/>

            <label for="Email">Email</label>
            <q-input
                ref="emailRef"
                :rules="emailRules"
                id="Email"
                outlined
                v-model="email"
                style="width: 100%"
                color="grey"
                placeholder="Email"/>

            <label for="customer_password">Password</label>
            <q-input
                ref="passwordRef"
                :rules="passwordRules"
                id="customer_password"
                outlined
                v-model="password"
                style="width: 100%"
                color="grey"
                placeholder="Password"
            >
            </q-input>
            <div class="submit">
              <q-btn
                  rounded
                  dense
                  color="black"
                  size="lg"
                  label="Register"
                  no-caps
                  type="submit"
              />
              <div style="text-align: end;">

                <span style="display: block;">
                  <strong >
                    <router-link class="Sign" to="/pc/Login" id="customer_register_link">Already have an account? Login!</router-link>
                  </strong>
                </span>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import {defineProps, defineEmits, defineExpose, ref} from 'vue'
import {useQuasar} from "quasar";
import {userRegister} from "@/api/userApi.ts";
import { userStore } from '@/store/user.ts';
import {useRouter} from "vue-router";

const userS = userStore()
const router = useRouter()
defineProps({})

const emit = defineEmits([])

defineExpose({})

const first_name = ref(null)
const first_nameRef = ref(null)
const last_name = ref(null)
const last_nameRef = ref(null)
const email = ref(null)
const emailRef = ref(null)
const password = ref(null)
const passwordRef = ref(null)

const $q = useQuasar()
const isValidEmail = (email) => {
  // 定义 email 格式的正则表达式
  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

  // 使用正则表达式检查 email 格式
  return emailRegex.test(email);
}
const first_nameRules = [
  val => (val && val.length > 0) || 'Please type something',
  val => val.length < 50 || 'Length less than 50',
]
const last_nameRules = [
  val => (val && val.length > 0) || 'Please type something',
  val => val.length < 50 || 'Length less than 50',
]
const emailRules = [
  val => (val && val.length > 0) || 'Please type something',
  val => isValidEmail(val) || `Please enter the correct email address.`
]
const passwordRules = [
  val => (val && val.length > 3 && val.length < 17) || 'Password length: 3 to 16',
]


const onSubmit = ()=> {
  first_nameRef.value.validate()
  last_nameRef.value.validate()
  emailRef.value.validate()
  passwordRef.value.validate()

  if (emailRef.value.hasError || passwordRef.value.hasError || first_nameRef.value.hasError || last_nameRef.value.hasError) {
    // form has error
    return
  }else{
    const obj = {
      first_name: first_name.value,
      last_name: last_name.value,
      email: email.value,
      password: password.value,
    }
    userRegister(obj).then((res) => {
      console.log(res.data)
      userS.setUserInfo(res.data)
      userS.setToken(res.data.token)
      router.push("/pc/Account")
    }).catch((err) => {
      console.log(err)
    })
  }
}
</script>

<style scoped lang='less'>
label{
  padding-bottom: 5px;
  display: inline-block;
  font-size: 19px;
  font-weight: 500;
}
.wrapper{
  padding: 0 50px 100px;
  .column{
    max-width: 480px;
  }
  .q-input{
    padding-bottom: 15px;
  }
}
.submit{
  padding-top: 20px;
  margin-bottom: 40px;
  .q-btn{
    width: 150px;
  }
  .Forgot, .Sign{
    &:hover{
      color: #26A69A;
      font-weight: bolder;
    }
  }
}
</style>